<template>
  <div class="search-tabs-case">
    <div class="search-lists clearfix">
      <component
        class="search-lists-item"
        v-for="(item,index) in aa"
        :key="index"
        :is="item.component"
        :desc="item"
        @output="callbackFn($event)"
      ></component>
    </div>

    <!-- dropdown -->
    <el-dropdown trigger="click">
      <el-button size="small" class="mr15">案件性质</el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-button size="small" class="mr15">报警电话</el-button>
    <el-button size="small" class="mr15">案件分类</el-button>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
import popInput from '@/components/popInput';
import popRange from '@/components/popRange';

const lists = [
  {
    component: 'popInput',
    title: '描述',
    visible: false,
    data: '',
    placeholder: '输入的描述信息'
  }, {
    component: 'popRange',
    title: '报警时间',
    visible: false,
    data: ''
  }
];
export default {
  name: 'statisticsSearchCase',
  components: {
    popInput,
    popRange
  },
  data() {
    return {
      aa: lists
    };
  },
  methods: {
    ...mapActions('Statistics', ['setItem']),
    callbackFn(event) {
      // console.log(event);
      this.setItem(event);
    }

  }
};

</script>
<style lang="scss" scoped>
.mr15 {
  margin-left: 15px;
}
.search-lists {
  .search-lists-item {
    float: left;
    margin-left: 10px;
  }
}
</style>
